<template>
<form @submit="sure" report-submit="true">
  <div class="cartcontrolDiv" v-if="product" :class="isShowConfirm===true?'showCartcontrolDiv':'hideCartcontrolDiv'">
    <div class="cartcontrol">    
      <div class="productContainer">
        <div class="productImg"><img :src="product.url"></div>
        <div class="productInfo">
          <div>
            <h3>{{product.name}}</h3>
            <p>￥{{currentPrice}}</p>
          </div>
        </div>
        <div class="cancel" @click="cancel">
          <img src="/static/images/goods/cancel.png">
        </div>
      </div>
      <div class="numSelect" v-if="selectType">
        <div class="numSelectTxt">请选择数量</div>
        <handel-amount 
          :max="virtualStockNum" 
          :quantityNum="productNum"
          @add="add"
          @decrease="decrease"
          >
        </handel-amount>
      </div>
      <div class="selectFixed">
        <div class="colorSelects" v-if="product.colors.length > 0">
          <div class="colorSelectTxt" >产品颜色</div>
          <color-select 
          v-for="(item, index) in product.colors" :key="index"
          :colors="item" 
          :currentFormatColorId="product.currentProductColorId" 
          >
          </color-select>
        </div>
        <div class="formatSelects">
          <div class="formatSelectTxt">规格</div>
          <format-select 
          v-for="(item, index) in product.format" :key="index" 
          :format="item" 
          :currentFormatId="product.currentFormatId" 
          :selected = selected
          :integralBoolean = integralBoolean
          ></format-select>
        </div>
      </div>
      <button formType="submit" class="selectFooter" :class="{'shareSelectFooter':selectType==false}">确定</button>
    </div>
    <div class="cartcontrolBg"  @click="cancel"></div>
  </div>
  </form>
</template>

<script>
  import handelAmount from '../shopcar/handel-amount.vue'
  import formatSelect from './format-select.vue'
  import colorSelect from './color-select.vue'
  import {mapGetters} from 'vuex'
  export default {
    components:{
      handelAmount,formatSelect,colorSelect
    },
    computed:{
      ...mapGetters({
        currentcar: 'currentProductCar',
        product: 'currentProduct'
      }),
      currentPrice () { //商品价格
        if(this.product){
          console.log('this.product的商品111',this.product)
          let price = 0
          for (let i = 0; i < this.product.format.length; i++) {
            if (this.product.currentFormatId === this.product.format[i].productFormatId) {
              if(this.selected == 2 && this.integralBoolean == true){
                price = this.product.format[i].sellPrice
              }else if(this.selected == 2 && this.integralBoolean == false){
                wx.setStorageSync('proShowPrice',this.product.showPrice)
                console.log('this.product的商品id为2的时候',this.product.showPrice)
                price = this.product.showPrice
              }else{
                price = this.product.format[i].sellPrice
              }
              // break
            }
          }
          return price
        } 
      },
      productNum() { //商品数量
        if(this.product){
          return this.product.quantity
        } 
      },
      selectType(){
        if('normal' == this.btnType || 'addShopCar' == this.btnType){ //闪购
          return true
        }else if('share' == this.btnType){
          return false
        }else{
          return false
        }
      },
      virtualStockNum(){
        return this.virtualStock
      }
    },
    data () {
      return {
        arrShopCar: [],
        integralBoolean:'',
        selected:'',
        isNeedLogin:false,
      }
    }, 
    props: {
      isShowConfirm: { 
        type: Boolean,
      },
      btnType:{
        type: String,
      },
      virtualStock:{//虚拟库存
        type: Number,
      },
      isFlashBuy:{
        type:Boolean,
      },
      isAddShopCar:{
        type:Boolean,
      }
    },

    onLoad(option){
      this.aid = option.aid;
      this.updateUserInfo()
      this.selected = wx.getStorageSync('selectIdNum')
      // console.log('是属于哪个分类',this.selected)
      console.log('弹框页面的product',this.product)
      let b = wx.getStorageSync('set_cookie')
      console.log('存入的cookie的值啊啊啊',b)
    },
    methods: {
      updateUserInfo(){//用户信息-获取积分
        this.$http.get('integral/my/integral','','',false).then((res)=>{ 
          console.log(res)
          if(res.data.code == 2){
            this.$emit('isLogin',true)
          }else{
            this.$emit('isLogin',false)
            this.integralBoolean = res.data.data.isAgent
            wx.setStorageSync('proIntegralFalse', res.data.data.isAgent)
            // console.log('是否是堂主',this.integralBoolean)
          }
        })
      },
      cancel(){
        this.$emit("cancel")
      },
      add() {
        this.$store.dispatch('addCurrentProductQuantity')
      },
      decrease() {
        this.$store.dispatch('decreaseCurrentProductQuantity')
      },
      sure(e) {
        //点击确定的时候传给后台选择的数量，颜色，大小，然后再跳转到购物车
        if('addShopCar' == this.btnType){ //闪购
          let sendGoBuyProduct = {
            productId: this.product.productId,
            formatId: this.product.currentFormatId,
            colorId: this.product.currentProductColorId,
            quantity: this.productNum,
          }
          if(this.virtualStock == 0){
            this.wxAlert("库存不足")
          }else{
            this._goAddShopCar(sendGoBuyProduct)
          }
        }else if('normal' == this.btnType){
            let sendGoBuyProduct = {
            productId: this.product.productId,
            formatId: this.product.currentFormatId,
            colorId: this.product.currentProductColorId,
            quantity: this.productNum,
          }
          if(this.virtualStock == 0){
            this.wxAlert("库存不足")
          }else{
            this._goBuy(sendGoBuyProduct)
          }
        }else if('share' == this.btnType){ //分享购
          let sendShareBuyProduct = {
            productId: this.product.productId,
            formatId: this.product.currentFormatId,
            colorId: this.product.currentProductColorId,
            //formId: e.mp.detail.formId
          }
          if(this.virtualStock > 0){
            this._shareBuy(sendShareBuyProduct)
          }else{
            this.wxAlert("库存不足")
          }
        }
      },
      _goBuy(sendGoBuyProduct){
        this.$http.post('cart/product/addOrUpdate',sendGoBuyProduct,"application/json").then((data)=>{ 
          let addDate = data.data.data
          console.log('此弹出框之后取得的值',addDate)
          this.isHaveCurrentProduct(addDate)
          this.$store.dispatch("checkSingleProduct",addDate.lineItemId)
          console.log(addDate)
          const url = "/pages/order-quickly/main"
          wx.navigateTo({ url })
          // const url = "/pages/shopcar/main"
          // wx.switchTab({ url })
        })
      },

      _goAddShopCar(sendGoBuyProduct){
        this.$http.post('cart/product/addOrUpdate',sendGoBuyProduct,"application/json").then((data)=>{ 
          let addDate = data.data.data
          this.isHaveCurrentProduct(addDate)
          console.log(addDate)
          // const url = "/pages/order-quickly/main"
          // wx.navigateTo({ url })
          const url = "/pages/shopcar/main"
          wx.switchTab({ url })
        })
      },
      
      _shareBuy(sendShareBuyProduct){
        this.$http.get(`bargains/createBargainOrder/`,sendShareBuyProduct,"application/json").then((data)=>{ 
          wx.setStorageSync('bargainOrderNo',data.data.data)  //缓存订单号
          const url = '/pages/share/main?bargainOrderNo=' + data.data.data;
          wx.navigateTo({ url })
        })
      },
      isHaveCurrentProduct(data){  //这是对购物车数量还是商品加减的一个判断
        this.currentcar.map((item) => {
          this.arrShopCar.push(item.lineItemId)  //单独取出id放入到一个数组中
        })
        if(this.arrShopCar.indexOf(data.lineItemId) > -1){
          console.log("存在，加数量")
          this.$store.dispatch("pushCurrentProductNum",data)
        }else{
          console.log("不存在，加商品")
          this.$store.dispatch("pushCurrentProduct",data)
        }
      },
      wxAlert(txt){
        wx.showToast({
            title: txt,
            icon: "none",
            duration: 2000,
            mask: true
        })
      }
    }
  }
</script>

<style scoped>
  button{
    border:none;
    border-radius:0;
  }
  button::after {
    border:none;
    border-radius:0;
  }
  .cartcontrolDiv .cartcontrolBg{
    position: fixed;
    z-index: 40;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.3;
  }
  .cartcontrol {
    position: fixed;
    z-index: 50;
    bottom: 0;
    left: 0;
    width: 100%;
    opacity: 1;
    background: #fff;
    color: #000;
    font-size: 32rpx;
    height: 653rpx; 
    border-radius: 15rpx 15rpx 0 0;
    padding-bottom: 120rpx;
  }
  .showCartcontrolDiv .cartcontrolBg{
    display: block;
    opacity: 0.3;
  }
  .showCartcontrolDiv .cartcontrol{
    bottom: 0rpx;
    transition: bottom 0.4s ;
  }
  .hideCartcontrolDiv .cartcontrolBg{
    display: none;
    opacity: 0;
  }
  .hideCartcontrolDiv .cartcontrol{
    bottom: -1000rpx;
    transition: bottom 0.4s ;
  }

  .cartcontrol .productContainer{
    padding: 30rpx;
    border-bottom: 1rpx solid #efeff4;
    display: flex;
    overflow: hidden;
  }
  .cartcontrol .productContainer .productImg{
    width: 156rpx;
    height: 156rpx;
    border: 1rpx solid #efeff4;
    border-radius: 6rpx;
    margin-right: 30rpx;
  }
  .cartcontrol .productContainer .productImg img{
    width: 100%;
    height: 100%;    
    border-radius: 6rpx;
  }
  .cartcontrol .productContainer .productInfo{
    flex: 1;
    margin-right: 30rpx;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
  }
  .cartcontrol .productContainer .productInfo>div{
    overflow: hidden;
  }
  .cartcontrol .productContainer .productInfo>div>h3{
    color: #000;
    font-size: 28rpx;
    width: 100%;
    margin-bottom: 22rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .cartcontrol .productContainer .productInfo>div>p{
    color: #e38a8a;
    font-size: 34rpx;
  }
  .cartcontrol .productContainer .cancel{
    width: 100rpx;
    height: 100rpx;   
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
  }
  .cartcontrol .productContainer .cancel img{
    width: 36rpx;
    height: 36rpx;     
    display: block;
  }
  .cartcontrol .numSelect{
    padding: 0 30rpx;
    height: 90rpx;
    display: flex;
    align-items: center;
  }
  .cartcontrol .numSelect .numSelectTxt{
    flex: 1;
    color: #000;
    font-size: 26rpx;
  }
  .cartcontrol .selectFixed{
    padding: 0 30rpx;
    height: 370rpx;
    overflow-y: auto;
  }
  .cartcontrol .colorSelects .colorSelectTxt, .cartcontrol .formatSelects .formatSelectTxt{
    color: #000;
    font-size: 26rpx;
    height: 90rpx;
    line-height: 90rpx;
  }
  .cartcontrol .colorSelects{
    border-bottom: 1rpx solid #efeff4;
    padding-bottom: 20rpx;
  }
  .cartcontrol .formatSelects{
    padding-bottom: 20rpx;
  }
  .cartcontrol .selectFooter{
    height: 98rpx;
    width: 100%;
    background: #e1c7d2; 
    color: white;
    font-size: 36rpx;
    display: flex;
    justify-content: center;
    align-items: center;   
  }
  .cartcontrol .shareSelectFooter{
    background: #aad1d6;   
  }
</style>
